<!--
 * @Author: Neko
 * @Date: 2021-05-21 16:16:21
 * @LastEditTime: 2021-05-28 09:32:47
 * @LastEditors: Neko
-->
<template>
  <contents class="message__container" :heightInclude="['navBar', 'tabBar']">
    <u-navbar
			:title="$t('locales.messageCentre')"
			:title-width="570"
			:border-bottom="false"
			:background="{ background: '#0049AC' }"
      title-color="#e6e6e6"
      back-icon-color="#e6e6e6"
			:is-back="true"
		>
			<view slot="right" class="right-icon" @click="onClickAllReadBtn">
        {{ $t('locales.messageReadAll') }}
			</view>
		</u-navbar>

    <view class="message__list">
      <view v-for="item in messageList" :key="item.id" class="message__item" @click="onClickMessageItem(item)">
        <!-- 审核相关？ -->
        <view class="message__header" v-if="item.auditStatus !== 0">
          <text class="title">{{ statusMap[item.auditStatus] }}</text>
          <text class="time">{{ item.createTime }}</text>
        </view>

        <view class="message__header" v-else>
          <text class="title">{{ typesMap[item.type] }}</text>
          <text class="time">{{ item.createTime }}</text>
        </view>

        <!-- 审核相关？ -->
        <view class="message__content" v-if="item.auditStatus !== 0">
          <text class="content">{{ getMessageContent(item) }}</text>
          <text v-if="!item.isRead" class="dot"></text>
        </view>

        <view class="message__content" v-else>
          <text class="content">{{ item.newsTitle }}</text>
          <text v-if="!item.isRead" class="dot"></text>
        </view>
      </view>
    </view>
  </contents>
</template>

<script>
import { getMessageListAction, handleReadAllMessageAction, handleReadMessageAction } from '@/api/http/user'

export default {
  data() {
    const _this = this

    return {
      pageData: {
        pageSize: 10,
        pageNo: 1
      },

      total: 0,

      messageList: [],

      statusMap: {
        '1': _this.$t('locales.approvalStatus1'),
        '-1': _this.$t('locales.approvalStatus2'),
        '-2': _this.$t('locales.approvalStatus3')
      },

      typesMap: {
        '1': _this.$t('locales.typesMap1'),
        '2': _this.$t('locales.typesMap2'),
        '3': _this.$t('locales.typesMap3'),
        '4': _this.$t('locales.typesMap4'),
        '5': _this.$t('locales.typesMap5'),
        '6': _this.$t('locales.typesMap6'),
      },

      statusDescriptionMap: {
        '1': _this.$t('locales.congratulation') + _this.$t('locales.appliedResult5') + '${storeName}' + _this.$t('locales.appliedResult2'),
        '-2': _this.$t('locales.regret') + '${storeName}' + _this.$t('locales.appliedResult4'),
        '-1': _this.$t('locales.regret') + _this.$t('locales.appliedResult1') + '${storeName} ' + _this.$t('locales.appliedResult3')
      }
    }
  },

  onLoad() {
    this.pageData.pageNo = 1
    this.messageList = []
    this.getMessageListAction()
  },

  onShow() {
    // this.pageData.pageNo = 1
    // this.messageList = []
    // this.getMessageListAction()
  },

  onPullDownRefresh() {
    this.pageData.pageNo = 1
    this.messageList = []
    this.getMessageListAction()

    uni.stopPullDownRefresh()
  },

  onReachBottom() {
    if (this.messageList.length >= this.total) return
    this.pageData.pageNo++
    this.getMessageListAction()
  },

  methods: {
    onClickAllReadBtn() {
      uni.showModal({
        content: this.$t('locales.isReadAllTip'),
        confirmText: this.$t('locales.determine'),
        cancelText: this.$t('locales.cancel'),
        confirmColor: '#0049AC',
        success: (res) => {
          if (res.cancel) {
            return
          }
          this.handleReadAllAction()
        }
      })
    },

    async handleReadAllAction() {
      try {
        const res = await handleReadAllMessageAction()

        if (res.code === 200) {
          this.messageList.forEach(current => current.isRead = 1)
        } else {
          return uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      } catch (e) {
        throw Error(e)
      }
    },

    async getMessageListAction() {
      try {
        const res = await getMessageListAction(this.pageData)

        if (res.code === 200) {
          this.messageList.push(...res.data.records)

          this.total = res.data.total
        } else {
          return uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      } catch (e) {
        throw Error(e)
      }
    },

    async onClickMessageItem(item) {
      try {
        const res = await handleReadMessageAction({
          ids: [item.id]
        })

        if (res.code === 200) {
          item.isRead = 1
      
          if (item.auditStatus !== 0) {
            uni.navigateTo({
              url: '/pages/user/message/detail?id=' + item.objId + '&newsId=' + item.id
            })
          } else {
            const purchase = [3, 4, 5, 6]
            console.log(purchase.indexOf(item.type))
            if (purchase.indexOf(item.type) > -1) {
              uni.navigateTo({
                url: '/pages/wantBuy/detail?id=' + item.objId
              })
            }
          }
          
        } else {
          return uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      } catch (e) {
        throw Error(e)
      }
      
    },

    getMessageContent(item) {
      if (!item.auditStatus) return
      const str = this.statusDescriptionMap[item.auditStatus]

      return str.replace('${storeName}', item.storeName)
    }
  }
}
</script>

<style lang="scss" scoped>
.right-icon {
  padding-right: 25rpx;
  color: #e6e6e6;
}

.message__list {
  padding-left: 23rpx;
  background: #fff;
}

.message__item {
  padding: 32rpx 23rpx 32rpx 0;
  border-bottom: 1px solid #EDEDED;
  
  .message__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22rpx;

    .title {
      font-size: 32rpx;
      font-weight: bolder;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .time {
      padding-left: 40rpx;
      flex-shrink: 0;
      font-size: 24rpx;
      color: #999;
    }
  }

  .message__content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .content {
      font-size: 28rpx;
      font-weight: 500;
      
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #666666;
    }

    .dot {
      margin-left: 28rpx;
      flex-shrink: 0;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: #E92E4A;
    }
  }
}

</style>